<template>
    <div class="app-container">
        <el-card class="about">
            <div class="wrapper">
                <h1> <img class="logo" :src="logo" />蜗易（IM Easy ） Admin 简介</h1>
                <div class="purpose">
                    <p>⭐提升 .NET 开发效率⭐: 简化开发流程，让开发人员聚焦业务逻辑，高效完成项目。</p>
                    <p>⭐上手简单，学习成本低⭐: 让新手快速入门，减少学习曲线，轻松融入开发流程。</p>
                    <p>⭐功能强大，易于扩展⭐: 提供强大的基础功能，灵活的扩展性，轻松满足多样化需求。</p>
                    <p>⭐遵循 DRY 原则⭐: 减少重复劳动，专注高效开发，让代码更加简洁和优雅。</p>
                </div>
                <div class="info">
                    <el-text type="info">本权限开发框架采用 .NET 8.0 与 SqlSugar ORM 打造高性能且易扩展的后端系统，内置权限管理、缓存、数据校验、身份鉴权、事件总线和动态
                        API等功能，实现了“开箱即用”。前端则基于 Vue 3.0 的响应式组件模式，配合 Element Plus 丰富的 UI 组件及 Vite 5
                        的极速构建，共同构成一个现代化、模块化的开发平台。整体架构设计清晰，代码简洁明了且注释详实，能够迅速应对复杂业务需求，同时支持灵活的二次开发，大幅提升了开发效率和系统维护的便捷性。</el-text>
                    <br>
                    <el-text type="info">如果对您有帮助可以给我一个star，让我继续前进下去 👉 </el-text>
                    <el-link type="primary" href="https://gitee.com/mrwangRefreshing/IM.Easy"
                        target="_blank">gitee源码地址</el-link>
                </div>

                <div class="contact">
                    <el-text type="primary">蜗易官方群：1041300890</el-text>
                </div>
                <div class="version">
                    <el-row :gutter="20">
                        <el-col :span="8" :offset="0">
                            <el-text type="primary">当前分支：{{ buildInfo.branch }}</el-text>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <el-text type="primary">更新时间：{{ buildInfo.buildTime }}</el-text>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <el-text type="primary">版本号：{{ buildInfo.semver }}</el-text>
                        </el-col>
                    </el-row>
                </div>
                <div class="remark">
                    <el-text type="danger">注：本框架将会不断迭代更新下去，尽可能快速的集成最新技术，同时也期待码友的加入</el-text>
                </div>
            </div>
            <div style="min-height: 160px;">
                <el-divider content-position="left">背景👉</el-divider>
                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-text type="info" style="text-indent: 2em;" tag="p"
                            size="large">在大学的时候就一直想要写一个属于自己的框架，但是一直断断续续，始终坚持不下去，要么遇到技术问题被卡住，要么就是自己的懒惰，最终结果都是放弃。
                            以儆效尤，我希望通过这个项目能让自己一直坚持下去，打造属于自己并开源的系统，然后一直维护下去。但是总得有个名字吧，想来想去，干脆叫IM Easy
                            Admin,中文为蜗易Admin(I是我，谐音蜗，Easy谐音易，意味着像蜗牛一样慢慢爬行)</el-text>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-image :src="keep" style="width: 200px;" />
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-divider content-position="left">前端技术栈👉</el-divider>
                <el-descriptions :column="3" border>
                    <el-descriptions-item v-for="(version, name) in dependencies" :key="name" :label="name"
                        label-align="right" align="center" :span="1" width="150px">
                        <el-text type="primary">{{ version }}</el-text>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div>
                <el-divider content-position="left">后端技术栈👉</el-divider>
                <el-empty description="敬请期待" />
            </div>
        </el-card>
    </div>
</template>


<script setup>
import logo from '@/assets/logo/logo.png'
import keep from '@/assets/images/run.png'
import buildInfo from "@/version.json"

import { dependencies } from '~/package.json';

console.log('项目依赖：', dependencies);
</script>

<style lang="scss" scoped>
.about {
    .header {
        display: flex;
        flex-direction: row;
        padding: 0 !important;
        margin: 0;
        gap: 5px;
        align-items: center;
    }

    :deep(.el-card) {
        display: flex;
        flex-direction: column;
        flex: 1 auto;


        .el-card__body {
            flex: 1 auto;
            height: calc(100% - 58px);
        }
    }
}

.wrapper {
    color: var(--el-color-primary);


    .logo {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        margin-right: 12px;
    }

    h1 {
        text-align: center;
        color: var(--el-color-primary);
    }

    .purpose {
        padding-top: 0;
        width: 80%;
        margin: auto;

        p {
            font-size: 14px;
            line-height: 30px;
            margin: 0;
        }
    }

    >div {
        padding-top: 20px;
    }

}
</style>
